<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>新建网页</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />

		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>

		<link href="./11.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript">
			function f1() {
				console.log($("input:checked")); //得到的是所有选择的标签组成的数组
				// "11,22,33,44"
				var str = "";

				for (var i = 0; i < $("input:checked").length; i++) {
					// []可以将jQuery对象转换成DOM对象
					var inputTemp = $("input:checked")[i]; //数组名+下标
					// 如果是jQuery对象：对象.val();
					str += inputTemp.value + ",";

					//$("input:checked:eq(0)").val(); 11
					//$("input:checked:eq(1)").val(); 22
					//$("input:checked:eq(2)").val(); 33
					// str += $("input:checked:eq("+i+")").val() + ",";
				}
				console.log(str);


				$.each($("input:checked"), function(i, obj) {
					// 0:[object HTMLInputElement]   obj是DOM对象
					// console.log(i + ":" + obj);
					//str += obj.value + ",";
					// 把obj这个DOM对象转换为jQuery对象: $(obj)
					str += $(obj).val() + ",";
				});
				console.log(str);

				$.each($("input:checked"), function() {
					//str += obj.value + ",";
					str += $(this).val() + ",";
				});

				console.log(str); // "11,22,33"
				// str = str.substr(0, str.length - 1);//最后位置是取不到
				// console.log(str);
				$("input:checked").each(function() {
					// 这里有一个隐藏的this，代表当前正在遍历的对象，
					// 而且这个this是JS的DOM对象
					str += $(this).val() + ",";

				});
				console.log(str);

			}




			function f2() {
				$(".hby:eq(1)").attr("checked", true);

				//设置多个复选框选中
				$(".hby").val([22, 33]);
			}
		</script>
		<style type="text/css">
			div {
				color: red;
				border: 4px solid blue;
			}
		</style>
	</head>
	<body>
		<h1>复选框操作</h1>

		爱好：
		<input type="checkbox" class="hby" name="hobby" value="11" />篮球&nbsp;
		<input type="checkbox" class="hby" name="hobby" value="22" />足球&nbsp;
		<input type="checkbox" class="hby" name="hobby" value="33" />排球&nbsp;
		<input type="checkbox" class="hby" name="hobby" value="44" />乒乓球&nbsp;

		<br /><br />
		<input type="button" value="获取" onclick="f1()" />
		<input type="button" value="设置" onclick="f2()" />
	</body>
</html>
